<template>
    <section class="exhibition-signUp-box">
        <!-- 展会报名 -->
        <div class="inside">
            <img src="/static/img/exhibition-signUp-bg-top.jpg" alt="">
            <article class="exhibition-three-list-box">
                <aside>
                    <ul v-show="!noExhibitionListShow">
                        <li class="clearfix" v-for="(item, index) in recommendExhibitionList" :key="index">
                            <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                            <a-button class="btn-danger btn-circle" type="danger">
                                <a :href="item.activityUrl" target="_blank" title="展会报名详情" alt="展会报名详情">查看详情</a>
                            </a-button>
                        </li>
                    </ul>
                    <h5 style="text-align: center; padding: 15px;" v-show="noExhibitionListShow">暂未查询到数据！</h5>
                </aside>
            </article>

            <article class="bottom-box clear">
                <img v-lazy="AdvertisingImg" alt="" class="AdvertisingImg"/>

                <a-form layout="horizontal" :form="form" @submit="submitApply" class="exhibition-signUp-form clearfix">
                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-select showSearch allowClear placeholder="请选择展会活动" style="width: 100%"
                                          v-decorator="['activities', {rules: [
                                             { required: true, type: 'number', message: '请选择展会活动', trigger: 'change' }
                                         ]}]">
                                    <a-select-option v-for="(item, index) in exhibitionList" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col  :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-input type="text" placeholder="请输入姓名"
                                         v-decorator="['name', {rules: [
                                             { required: true, message: '请正确输入您的姓名', trigger: 'blur' }
                                         ]}]">
                                    <i slot="prefix" class="iconfont icon-gerenjibenxinxi" style="color:rgba(0,0,0,.25)"></i>
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-input type="number" placeholder="请输入电话号码"
                                         v-decorator="['phone', {rules: [
                                            {required: true, validator: this.phone_validation, trigger: 'blur' },
                                        ]}]">
                                    <i slot="prefix" class="iconfont icon-dianhua" style="color:rgba(0,0,0,.25)"></i>
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-input type="email" placeholder="请输入邮箱"
                                         v-decorator="['email', {rules: [
                                            {required: true, validator: this.email_validation, trigger: 'blur' },
                                        ]}]">
                                    <i slot="prefix" class="iconfont icon-dkw_youxiang" style="color:rgba(0,0,0,.25)"></i>
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-select showSearch allowClear :getPopupContainer="getPopupContainer" placeholder="请选择所在城市" style="width: 100%"
                                          v-decorator="['LocationCity', {rules: [
                                                { required: true, message: '请选择所在城市', trigger: 'change' }
                                            ]}]">
                                    <a-select-option v-for="(item, index) in LocationListItem" :value="item.title" :key="item.title">{{ item.title }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-select showSearch allowClear placeholder="请选择参加人数" style="width: 100%"
                                          v-decorator="['peopleNumber', {rules: [
                                                { required: true, message: '请选择参加人数', trigger: 'change' }
                                          ]}]">
                                    <a-select-option value="1">1人</a-select-option>
                                    <a-select-option value="2">2人</a-select-option>
                                    <a-select-option value="3">3人</a-select-option>
                                    <a-select-option value="4">4人</a-select-option>
                                    <a-select-option value="5">5人</a-select-option>
                                    <a-select-option value="6">6人</a-select-option>
                                    <a-select-option value="7">7人</a-select-option>
                                    <a-select-option value="8">8人</a-select-option>
                                    <a-select-option value="9">9人</a-select-option>
                                    <a-select-option value="10+">10人及以上</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item hasFeedback>
                                <a-input-search type="number" @search="sendCode" placeholder="请输入验证码"
                                                v-decorator="['code', {rules: [
                                                    { required: true, validator: this.code_validation, trigger: 'blur' },
                                                ]}]">
                                    <i slot="prefix" class="iconfont icon-icon_sms" style="color:rgba(0,0,0,.25)"></i>
                                    <a-button type="primary" slot="enterButton" :disabled="codeDisabled">{{ codeText }}</a-button>
                                </a-input-search>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                            <a-form-item style="text-align: center">
                                <a-button htmlType="submit" type="primary" :disabled="submitApplyDisabled" style="margin: 5px 0 0 0;">
                                    <i class="iconfont icon-submit"></i> 报名参加
                                </a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>

                <p>填写信息并提交，报名成功后，展会前一天有专业的顾问团队与您电话确认，感谢您的参与！</p>
                <aside class="tel-weibo-box">
                    <a-row :gutter="32">
                        <a-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15" class="tel-box">
                            <div class="clearfix">
                                <p>展会报名电话</p>
                                <span>400-600-4982</span>
                            </div>
                            <div class="clearfix">
                                <p>公司联系电话</p>
                                <span>010-88553465</span>
                            </div>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9" class="clearfix weibo-box">
                            <img src="/static/img/logoIc.png" class="left" alt=""/>
                            <aside class="right">
                                <p>华美优胜<img src="/static/img/weibo-img.jpg"  alt=""></p>
                                <!--微博关注按钮-->
                                <!--<div id="wb_follow_btn" ></div>-->
                                <div uid="1922138342" class="a_23" type="red_1" width="67" height="24"><iframe src="http://widget.weibo.com/relationship/followbutton.php?btn=red&amp;style=1&amp;uid=1922138342&amp;width=67&amp;height=24&amp;language=zh_cn" width="67" height="24" frameborder="0" scrolling="no" marginheight="0"></iframe></div>
                            </aside>
                        </a-col>
                    </a-row>
                </aside>
                <div class="qccode-box">
                    <div>
                        <img src="/static/img/HMYS-dingyuehao.jpg"  alt=""/>
                    </div>
                    <p>扫一扫，关注我们</p>
                </div>
            </article>
        </div>
        <div class="disclaimer-box">
            <h4>免责声明：</h4>
            <p>1、凡本网注明来源：华美优胜美国房产网及其关联网站的所有文字、图片和音视频稿件，版权均为本网独家所有，任何媒体、网站或个人在转载使用前必须经本网站同意并注明“来源：华美优胜美国房产网”方可进行转载使用，违反者本网将依法保留追究其法律责任的权利。</p>
            <p>2、本网转载并注明其他来源的稿件，是本着为读者传递更多信息之目的，并不代表本网赞同其观点或证实其内容的真实性。其他媒体、网站或个人从本网转载使用的，请注明原文来源地址。如若产生纠纷，本网不承担任何法律责任。</p>
            <p>3、如本网转载稿件涉及版权等问题，请作者一周内来电或来函联系。</p>
        </div>

        <p v-show="false">{{getLocationList}}</p>

    </section>
</template>

<script>
    let phoneReg = /^(1)[3|4|5|6|7|8|9](\d){9}$/;

    export default {
        data() {
            return {
                recommendExhibitionList: [], // 公共海外房展会报名框-近期展会推荐
                exhibitionList: [], // 近期展会列表数据
                noExhibitionListShow: false,//三条近期展会列表——没有数据是否显示

                AdvertisingImg: '', //展会报名广告图片
                form: this.$form.createForm(this),
                LocationListItem: [],    //用户所在城市列表
                verificationCode: '', //验证码的验证串
                codeTime: 0, //获取验证码倒计时
                codeText: '获取验证码', //获取验证码按钮的提示文本
                codeDisabled: false, //获取验证码按钮的状态
                submitApplyDisabled: false,//提交按钮的状态
            }
        },
        computed: {
            //从state获取用户所在城市列表
            getLocationList() {
                if(this.$store.getters.get_LocationList){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_LocationList).length != 0){
                        this.LocationListItem = this.$store.getters.get_LocationList;
                    }
                }
                return this.$store.getters.get_LocationList
            },
        },
        created() {
        },
        mounted() {
            //获取近期展会列表数据
            this.getExhibitionData();
            //展会报名广告图片
            this.getAdvertisingImg();

            // 防刷新：检测是否存在倒计时计算localStorage.codeTime
            this.isCodeTime();


            // 微博关注按钮
            // WB2.anyWhere(function(W){
            //     W.widget.followButton({
            //         'nick_name': '海外房产咨询_华美优胜',  //用户昵称
            //         'id': "wb_follow_btn",
            //         'show_head' : true, //是否显示头像
            //         'show_name' : true, //是否显示名称
            //         'show_cancel': true //是否显示取消关注按钮
            //     });
            // });
        },
        methods: {
            // select组件——菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
            getPopupContainer (trigger) {
                return trigger.parentElement
            },
            //获取近期展会列表数据
            getExhibitionData() {
                this.$get('/expo/list/2/1/3?isRecommend=true',{
                    sort: true,
                }).then(res => {
                    if (res.status === 0) {
                        this.exhibitionList = res.list;
                        this.recommendExhibitionList = res.list;

                        //给antd表单项赋值
                        this.form.setFieldsValue({
                            activities: res.list[0].id,
                        });
                    } else {
                        console.log(res.msg);
                    }
                })
            },

            //跳转到展会活动详情页
            goExhibitionDetails(exhibitionId) {
                this.$router.push({ path: "/ExhibitionDetails", query: { exhibitionId: exhibitionId } });
            },
            // 展会报名广告图片
            getAdvertisingImg() {
                this.$get('/a/4').then(res => {
                    if (res.status === 0) {
                        this.AdvertisingImg = res.data.list[0].photo;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //发送验证码
            sendCode() {
                let phone = this.form.getFieldValue('phone');
                // 手机号正则验证
                if (phoneReg.test(phone)) {
                    // 手机号符合验证
                    this.$get('/sms/apply/' + phone).then(res => {
                        if (res.status == 0) {
                            this.codeTime = 60;
                            this.codeDisabled = true;
                            this.codeCountdown();
                            this.verificationCode = res.data;
                            this.$message.success( '发送成功，请您耐心等待短信通知。' )
                        } else {
                            this.$message.warning(res.msg);
                        }
                    })
                } else {
                    this.$message.error('手机号格式错误。')
                }
            },
            // 防刷新：检测是否存在倒计时计算localStorage.codeTime
            isCodeTime() {
                if (localStorage.codeTime) {
                    this.codeTime = parseInt(localStorage.codeTime);
                    this.codeText = this.codeTime + 's后重新获取';
                    this.codeDisabled = true;
                    let resend = setInterval(function () {
                        this.codeTime--;
                        if (this.codeTime > 0) {
                            this.codeText = this.codeTime + 's后重新获取';
                            localStorage.codeTime = this.codeTime;
                        } else {
                            localStorage.removeItem('codeTime');
                            clearInterval(resend);
                            this.codeText = '获取验证码';
                            this.codeDisabled = false;
                        }
                    }, 1000)
                }
            },
            //验证码倒计时计算
            codeCountdown() {
                if (this.codeTime > 0) {
                    this.codeTime--;
                    this.codeText = this.codeTime + 's后重新获取';
                    setTimeout(this.codeCountdown, 1000);
                    localStorage.codeTime = this.codeTime;
                } else {
                    this.codeTime = 0;
                    this.codeText = '获取验证码';
                    this.codeDisabled = false;
                    localStorage.removeItem('codeTime')
                }
            },
            //提交报名展会活动
            submitApply(e){
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$post('/expo/apply', {
                            name: values.name,   //客户姓名
                            phone: values.phone, //客户电话
                            email: values.email, //客户邮箱
                            msg: values.code,    //验证码
                            msgId: this.verificationCode,   //验证码的验证串
                            expoId: values.activities,   //选择报名展会活动的id
                            location: values.LocationCity,   //用户选择的所在城市
                            personnelCount: values.peopleNumber, //参加人数
                        }).then(res => {
                            if (res.status == 0) {
                                this.$notification['success']({
                                    message: '华美优胜提示您：',
                                    description: '您的展会活动报名信息提交成功，华美优胜顾问团队将及时与您取得联系并提供专业的服务！',
                                });

                                //清空表单数据
                                this.form.setFieldsValue({
                                    name: '',   //客户姓名
                                    phone: '', //客户电话
                                    email: '', //客户邮箱
                                    activities: '', //选择报名展会活动的id
                                    LocationCity: '', //用户选择的所在城市
                                    peopleNumber: '', //参加人数
                                    code: '',   //验证码
                                });
                            } else {
                                this.$message.warning(res.msg);
                            }
                        })
                    }else{
                        this.$message.error('表单项输入有误，请检查并重新输入！');
                    }
                });
            },




        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        /* 展会报名 */
        .exhibition-signUp-box {
            background: inherit;
            margin: 50px 0;
            >.inside {
                width: 700px;
                height: 1400px;
                position: relative;
                margin: 0 auto;
                >img{
                    width: 100%;
                }
                >.exhibition-three-list-box {
                    width: 100%;
                    height: auto;
                    background: url("/static/img/exhibition-signUp-bg-recommendExhibition-bg.jpg") no-repeat center center;
                    background-size: 100% 100%;
                    >aside {
                        width: 500px;
                        margin: 0 auto;
                        > ul {
                            > li {
                                margin: 10px 0 0 0;
                                line-height: 30px;
                                > p {
                                    float: left;
                                }
                                > button {
                                    margin: 0 0 0 10px;
                                    float: right;
                                    padding: 0;
                                    a {
                                        display: block;
                                        color: #fff;
                                        padding: 6px 15px;
                                    }
                                }
                            }
                            > li:first-of-type {
                                margin: 0;
                            }
                        }
                    }
                }
                >.bottom-box {
                    width: 100%;
                    height: auto;
                    padding: 50px 0 100px 0;
                    background: url("/static/img/exhibition-signUp-bg-bottom.jpg") no-repeat center center;
                    background-size: 100% 100%;
                    position: relative;
                    text-align: center;
                    > .AdvertisingImg {
                        display: inline-block;
                        margin: 0 auto;
                        max-height: 200px;
                    }
                    > .exhibition-signUp-form {
                        width: 500px;
                        padding: 20px 10px 10px 10px;
                        text-align: center;
                        border-top: 1px dashed #fff;
                        border-bottom: 1px dashed #fff;
                        margin: 0 auto;
                        margin-top: 20px;
                        .ant-form-item{
                            text-align: left;
                        }
                    }
                    > p {
                        width: 100%;
                        font-size: 13px;
                        color: #fff;
                        text-align: center;
                        margin: 0 auto;
                        margin-top: 20px;
                    }
                    > .tel-weibo-box {
                        width: 420px;
                        margin: 0 auto;
                        margin-top: 20px;
                        >.ant-row {
                            > .tel-box {
                                > div {
                                    margin: 15px 0 0 0;
                                    > p {
                                        padding: 2px 8px;
                                        background: #be0e0e;
                                        font-size: 14px;
                                        color: #fff;
                                        display: inline-block;
                                        float: left;
                                        margin-bottom: 0px;
                                    }
                                    > span {
                                        font-size: 14px;
                                        color: #fff;
                                        float: left;
                                        margin: 2px 0 0 15px;
                                    }
                                }
                                > div:first-of-type {
                                    margin: 0;
                                }
                            }
                            > .weibo-box {
                                padding: 10px;
                                background: #fff;
                                > img {
                                    width: 40px;
                                    margin: 10px 0 0 0;
                                }
                                > aside {
                                    > p {
                                        font-size: 14px;
                                        color: #799ad8;
                                        margin-bottom: 0px;
                                        > img {
                                        }
                                    }
                                }
                            }
                        }
                    }
                    >.qccode-box {
                        text-align: center;
                        margin: 0 auto;
                        margin-top: 20px;
                        > div {
                            display: inline-block;
                            padding: 10px;
                            background: #fff;
                            > img {
                                width: 120px;
                            }
                        }
                        > p {
                            font-size: 14px;
                            color: #fff;
                            margin: 5px 0 0 0;
                        }
                    }
                }
            }
            .disclaimer-box {
                margin: 40px 0 0 0;
                background: none;
                > h4 {
                    font-size: 18px;
                    margin: 10px 0;
                }
                > p {
                    font-size: 15px;
                    line-height: 30px;
                }
            }
        }
    }
</style>
